<template>
  <base-container>
    <base-card class="pb-20px" title="财务概况">
      <div class="flex items-top justify-between">
        <div>
          <p>1、【资金账户】指您充值或线下对公转账的费用账户，用于服务类（如风控、征信等）消费的抵扣。</p>
          <p class="pt-10px">2、【租金账户】指您租赁订单所获得的租金、买断金收入</p>
          <p class="pt-10px">3、【采购账户】用于您向平台采购设备时，抵扣设备费用，需预先充值</p>
          <p class="pt-10px">4、【资金账户】、【采购账户】余额不足时，会XX</p>
          <p class="pt-10px">
            5、您可通过对公转账或汇款至我司对公账号（见下），我司审核后会将相应金额体现到资金账户余额下。
          </p>
        </div>
        <div>
          <el-button type="primary" @click="handleTransferAccount">线下转账入账</el-button>
        </div>
      </div>
    </base-card>
    <base-card class="mt-20px" title="线下对公转账，平台方对公收款信息"></base-card>
    <el-row class="mt-20px">
      <el-col :span="12" class="p-10px">
        <base-card class="h-300px pb-20px" title="资金账户">
          <div>账户余额（元）</div>
          <div class="flex items-center justify-between">
            <div>0.00</div>
            <el-button type="danger" @click="handleRecharge('fund')">在线充值 </el-button>
          </div>
          <div class="pt-10px flex justify-between items-center">
            <div class="p-10px bg-pink-300 rounded-md">
              <div>充值金额（元）</div>
              <div>0.25</div>
            </div>
            <div class="p-10px bg-pink-300 rounded-md">
              <div>充值金额（元）</div>
              <div>0.25</div>
            </div>
            <div class="p-10px bg-pink-300 rounded-md">
              <div>充值金额（元）</div>
              <div>0.25</div>
            </div>
          </div>
        </base-card>
        <base-card class="h-300px mt-20px pb-20px" title="采购账户">
          <div>账户余额（元）</div>
          <div class="flex items-center justify-between">
            <div>0.00</div>
            <el-button type="danger" @click="handleRecharge('purchase')">在线充值 </el-button>
          </div>
          <div class="pt-10px flex justify-between items-center">
            <div class="p-10px bg-pink-300 rounded-md">
              <div>充值金额（元）</div>
              <div>0.25</div>
            </div>
            <div class="p-10px bg-pink-300 rounded-md">
              <div>线下转账金额（元）</div>
              <div>0.25</div>
            </div>
            <div class="p-10px bg-pink-300 rounded-md">
              <div>已消费金额（元）</div>
              <div>0.25</div>
            </div>
          </div>
        </base-card>
      </el-col>
      <el-col :span="12" class="p-10px">
        <base-card class="h-620px pb-20px" title="租金账户">
          <div class="flex justify-between items-center">
            <div>
              <p>账户余额（元）</p>
              <div>0.00</div>
            </div>
            <el-button type="danger">提现</el-button>
          </div>
          <div class="py-10px">
            <span>
              <span>已冻结：</span>
              <span>0.00（元）</span>
              <span>|</span>
            </span>
            <span>
              <span>提现中：</span>
              <span>0.00（元）</span>
              <span>|</span>
            </span>
            <span>
              <span>可提现：</span>
              <span>0.00（元）</span>
            </span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="flex justify-between items-center">
                <div class="p-10px bg-bd9 rounded-md">
                  <div>总应收租金（元）</div>
                  <div>0.00</div>
                </div>
                <div class="p-10px bg-bd9 rounded-md">
                  <div>已收租金（元）</div>
                  <div>0.00</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="p-10px bg-bd9 rounded-md">
                <div>已提现金额（元）</div>
                <div>0.00</div>
              </div>
            </el-col>
          </el-row>
          <div class="flex justify-between items-center mt-20px">
            <div class="bg-bd9 rounded-md p-10px">
              <div>应入账收入（元）</div>
              <div>0.00</div>
            </div>
            <div class="bg-bd9 rounded-md p-10px">
              <div>已入账收入（元）</div>
              <div>0.00</div>
            </div>
            <div class="bg-bd9 rounded-md p-10px">
              <div>未入账收入（元）</div>
              <div>0.00</div>
            </div>
            <div class="bg-bd9 rounded-md p-10px">
              <div>已入账支出（元）</div>
              <div>0.00</div>
            </div>
            <div class="bg-bd9 rounded-md p-10px">
              <div>未入账支出（元）</div>
              <div>0.00</div>
            </div>
          </div>
          <h3>店铺账户信息:</h3>
          <p class="text-bd">该账户信息来源您与平台签署的协议，若需更改请联系和您对接的工作人员</p>
          <el-descriptions title="" :column="2">
            <el-descriptions-item label="店铺名称：">青云相</el-descriptions-item>
            <el-descriptions-item label="支付宝账户:">18571407300@163.00m</el-descriptions-item>
            <el-descriptions-item label="商户名称">青云租赁有限公司</el-descriptions-item>
            <el-descriptions-item label="结算人：">武汉青青封代网络科技有限公司</el-descriptions-item>
          </el-descriptions>
        </base-card>
      </el-col>
    </el-row>

    <!-- 弹窗 -->
    <base-dialog v-model="isShowExport" :show-footer="false" title="续费" width="40%">
      <div class="px-20px">
        <el-form :model="exportParams">
          <el-row>
            <el-col :span="24">
              <el-form-item label="信息生效时间" prop="time">
                <el-date-picker
                  v-model="exportParams.time"
                  placeholder="选择日期"
                  style="width: 100%"
                  type="date"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="" prop="checkList">
                <el-checkbox-group v-model="exportParams.checkList">
                  <div v-for="item in checkOptions" :key="item.value" class="p-10px border-b">
                    <el-checkbox :label="item.label" :value="item.value" />
                  </div>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="text-center">
                <el-button type="primary" @click="isShowExport = false">取消 </el-button>
                <el-button :disabled="exportParams.checkList.length == 0" type="primary" @click="isShowExport = false"
                  >导出
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </base-dialog>
    <base-dialog v-model="isShowTransfer" :show-footer="false" title="线下转账申请" width="40%">
      <div class="px-20px">
        <el-form ref="transferFormRef" :model="transferParams" :rules="transferRules" label-width="auto">
          <el-row>
            <el-col :span="24">
              <el-form-item label="转账账户：" prop="accounts">
                <el-checkbox-group v-model="transferParams.accounts">
                  <el-checkbox
                    v-for="item in accountsOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="资金账号金额：" prop="amount">
                <el-input v-model="transferParams.amount" placeholder="请输入资金账号金额" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="采购账号金额：" prop="purchaseAmount">
                <el-input v-model="transferParams.purchaseAmount" placeholder="请输入采购账号金额" />
              </el-form-item>
            </el-col>
            <!-- 转账日期 -->
            <el-col :span="24">
              <el-form-item label="转账日期：" prop="transferTime">
                <el-date-picker
                  v-model="transferParams.transferTime"
                  placeholder="选择日期"
                  style="width: 100%"
                  type="date"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 转账单号 -->
            <el-col :span="24">
              <el-form-item label="转账单号：" prop="transferNumber">
                <el-input v-model="transferParams.transferNumber" placeholder="请输入转账单号" />
              </el-form-item>
            </el-col>
            <!-- 转账方名称 -->
            <el-col :span="24">
              <el-form-item label="转账方名称：" prop="transferName">
                <el-input v-model="transferParams.transferName" placeholder="请输入转账方名称" />
              </el-form-item>
            </el-col>
            <!-- 转账方银行 -->
            <el-col :span="24">
              <el-form-item label="转账方银行：" prop="transferBank">
                <el-input v-model="transferParams.transferBank" placeholder="请输入转账方银行" />
              </el-form-item>
            </el-col>
            <!-- 转账方银行账号 -->
            <el-col :span="24">
              <el-form-item label="转账方银行账号：" prop="transferBankAccount">
                <el-input v-model="transferParams.transferBankAccount" placeholder="请输入转账方银行账号" />
              </el-form-item>
            </el-col>
            <!-- 上传转账凭证 -->
            <el-col :span="24">
              <el-form-item label="上传转账凭证：" prop="fileList">
                <base-upload
                  v-model:file-list="transferParams.fileList"
                  :drag="false"
                  :http-request="handleHttpRequest"
                  :is-upload-mode="true"
                  :limit="5"
                  :mode="'upload'"
                  :on-error="handleError"
                  :on-success="handleSuccess"
                  :show-file-list="true"
                  action="#"
                  list-type="picture-card"
                >
                  <el-button type="primary">选择文件</el-button>
                </base-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="text-center">
                <el-button type="default" @click="handleCancelReview">取消 </el-button>
                <el-button type="primary" @click="handleSubmitReview">提交审核 </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </base-dialog>
    <base-dialog
      ref="rechargeFormRef"
      v-model="isShowRecharge"
      :rules="rechargeRules"
      :show-footer="false"
      title="在线充值"
      width="40%"
    >
      <div class="px-20px">
        <el-form
          v-if="!isShowFinish"
          ref="rechargeFormRef"
          :model="rechargeParams"
          :rules="rechargeRules"
          label-width="auto"
        >
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="充值金额：" prop="amount">
                <el-input v-model="rechargeParams.amount" placeholder="请输入充值金额" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="handlePayment">去支付 </el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-form v-if="isShowFinish" :model="rechargeParams" label-width="auto">
          <el-row>
            <el-col :span="24">
              <el-col :span="24">
                <el-form-item label="客户名称：">
                  <span>{{ rechargeParams.customerName }}</span>
                  <span></span>
                </el-form-item>
                <el-form-item label="客户余额：">
                  <span>{{ rechargeParams.balance }}</span>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <div class="text-center">
                <div>
                  <span class="text-red"> * </span>
                  <span>支付金额：{{ rechargeParams.amount }}元</span>
                </div>
                <el-image :src="zfbPng" class="w-100px h-100px"></el-image>
                <p>使用支付宝扫码支付</p>
                <p>请在{{ minutes }}分钟内完成支付</p>
                <el-button class="mt-20px" type="primary" @click="handleFinishiRecharge">完成充值 </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </base-dialog>
    <base-dialog v-model="isShowTransferAccount" title="转账申请" width="40%">
      <avue-table-search v-model="transferAccountParams" :option="searchOption" />
    </base-dialog>
  </base-container>
</template>
<script setup>
  import { tableOption, tabOptions, searchOption } from "@/crudOption/finance/MerchantAccount.js";
  import useCrudHook from "avue-table/useCrudHook";
  import { commonUpload } from "@/api/model/files.js";
  import zfbPng from "@/assets/finance/zfb.png";
  import { ElMessage } from "element-plus";
  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    add: loadAdd,
    edit: loadEdit,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
  } = useCrudHook({
    get: Api.customer.GetCustomerPage,
    search: { status: "01" },
  });
  //线下转账申请参数
  const transferAccountParams = ref(null);

  //导出显示
  const isShowExport = ref(false);
  const tabValue = ref("01");
  //导出参数
  const exportParams = ref({
    // 信息生效时间
    time: "",
    // 选择的导出项
    checkList: [],
  });
  //线下转账申请显示
  const isShowTransfer = ref(false);
  // 线下转账申请表单
  const transferFormRef = ref(null);
  //显示在线充值
  const isShowRecharge = ref(false);
  // 线下转账账户参数项
  const accountsOptions = ref([
    { label: "资金账户", value: "01" },
    { label: "采购账户", value: "02" },
  ]);
  //是否显示支付完成状态
  const isShowFinish = ref(false);
  //线下转账显示
  const isShowTransferAccount = ref(false);

  //线下转账申请参数
  const transferParams = ref({
    //转账账户
    accounts: [],
    //资金账号金额
    amount: "",
    //采购账号金额
    purchaseAmount: "",
    //转账日期
    transferTime: "",
    //转账单号
    transferNumber: "",
    //转账方名称
    transferName: "",
    //转账方银行
    transferBank: "",
    //转账方银行账号
    transferBankAccount: "",
    //上传转账凭证
    fileList: [],
  });

  //在线充值参数
  const rechargeParams = ref({
    //充值金额
    amount: "100",
    //客户名称
    customerName: "青云租",
    //客户余额
    balance: "1000",
  });
  //线下转账申请参数验证
  const transferRules = ref({
    accounts: [{ required: true, message: "请选择转账账户", trigger: "blur" }],
    amount: [{ required: true, message: "请输入资金账号金额", trigger: "blur" }],
    purchaseAmount: [{ required: true, message: "请输入采购账号金额", trigger: "blur" }],
    transferTime: [{ required: true, message: "请选择转账日期", trigger: "blur" }],
    transferNumber: [{ required: true, message: "请输入转账单号", trigger: "blur" }],
    transferName: [{ required: true, message: "请输入转账方名称", trigger: "blur" }],
    transferBank: [{ required: true, message: "请输入转账方银行", trigger: "blur" }],
    transferBankAccount: [{ required: true, message: "请输入转账方银行账号", trigger: "blur" }],
    fileList: [{ required: true, message: "请上传转账凭证", trigger: "blur" }],
  });

  //在线充值参数验证
  const rechargeRules = ref({
    amount: [{ required: true, message: "请输入充值金额", trigger: "blur" }],
  });
  //导出项
  const checkOptions = ref([
    { label: "服务消费列表", value: "01" },
    { label: "消费服务列表", value: "02" },
    { label: "采购记录", value: "03" },
    { label: "蚂蚁保", value: "04" },
    { label: "充值记录", value: "05" },
    { label: "线下转账记录", value: "06" },
    { label: "提现列表", value: "07" },
    { label: "租金列表", value: "08" },
  ]);
  // 上传成功
  const handleSuccess = (file, fileList, response) => {
    console.log({ file, fileList, response });
  };
  // 上传失败
  const handleError = (error, file, fileList) => {};
  // 上传请求
  const handleHttpRequest = options => {
    let { file } = options;
    const formData = new FormData();
    formData.append("file", file);
    commonUpload(formData, { fileType: 2, isSecretFile: true }).then(res => {
      if (res.code == 200) {
        file.url = res.data;
      }
    });
    console.log(transferParams.value);
  };
  // 提交审核
  const handleSubmitReview = () => {
    transferFormRef.value.validate(valid => {
      if (valid) {
        console.log(transferParams.value);
      } else {
        transferFormRef.value.resetFields();
        isShowTransfer.value = false;
      }
    });
  };
  // 取消审核
  const handleCancelReview = () => {
    transferFormRef.value.resetFields();
    isShowTransfer.value = false;
  };
  // 显示在线充值
  const handleRecharge = type => {
    //资金账户
    if (type === "fund") {
      isShowRecharge.value = !isShowRecharge.value;
      isShowFinish.value = false;
      return false;
    }
    //采购账户
    if (type === "purchase") {
      isShowRecharge.value = !isShowRecharge.value;
      isShowFinish.value = false;
      return false;
    }
  };
  // 充值完成
  const handleFinishiRecharge = () => {
    isShowRecharge.value = !isShowRecharge.value;
  };
  // 支付完成状态
  const handlePayment = () => {
    isShowFinish.value = !isShowFinish.value;
    minutes.value = 30; //默认30分钟
    startTimer();
  };
  //倒计时30分钟关闭弹框
  const isVisible = ref(true);
  const minutes = ref(30);
  const timer = ref(null);
  const closeModal = () => {
    clearInterval(timer.value); // 清除计时器
    isVisible.value = false; // 隐藏弹窗
    ElMessage({
      message: "很抱歉，本次充值失败，请重新充值",
      type: "error",
    }); //弹出支付失败消息
  };
  //开启计时器
  const startTimer = () => {
    timer.value = setInterval(() => {
      minutes.value--;
      if (minutes.value === 0) {
        closeModal();
      }
    }, 60000); // 每分钟更新一次
  };
  //线下转账入账弹框显示
  const handleTransferAccount = () => {
    isShowTransferAccount.value = !isShowTransferAccount.value;
  };

  onMounted(() => {
    loadGetTableData();
  });

  //accountBalanceDetails
</script>
